﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <title>Image Browser </title>
    <link href="@Url.Content("~/Content/themes/redmond/jquery-ui-1.8.2.custom.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/FileUpload/jquery.fileupload-ui.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/ckeditor/UploadPlugin/style.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/Jquery/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Jquery/jquery-ui-1.8.18.custom.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Jquery/jquery.tmpl.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/Core/Solution.Core.blockUI.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Content/FileUpload/jquery.fileupload.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Content/FileUpload/jquery.fileupload-ui.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Content/FileUpload/jquery.iframe-transport.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Content/FileUpload/jquery.fileupload-ui.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Content/FileUpload/application.js")" type="text/javascript"></script>
    <script type="text/javascript">
        if (typeof (Solution) == 'undefined') Solution = {};
        Solution.ImageUpload = {
            Init: function () {
                this.BindDirectoryList();
                this.BindImageList('');
                this.OnSelectImage();
                this.BindEvent();
            },
            BindDirectoryList: function () {
                this.blockUI();
                $.ajax({
                    url: '@Url.Action("BindDirectoryList")',
                    data: {},
                    type: 'POST',
                    success: function (data) {
                        $('#DirectoryList').children().remove();
                        $('#DirectoryList').append($('<option selected="selected" >', { value: "Root" }).text("Root"));
                        $.each(data, function (key, value) {
                            $('#DirectoryList').append($('<option>', { value: value }).text(value));
                        });
                    },
                    error: function () {
                        alert("Error");
                    }
                });
            },
            DirectoryListSelectChange: function () {
                var name = $('#DirectoryList option:selected').val();
                this.BindImageList(name);

            },
            CreateNewFolder: function () {
                var name = prompt('Enter name of folder:');
                if (name != null && name != '') {
                    $.ajax({
                        url: '@Url.Action("CreateNewFolder")',
                        data: { myName: name },
                        type: 'POST',
                        success: function (data) {
                            if (data == 'ok')
                                Solution.ImageUpload.BindDirectoryList();
                        },
                        error: function () {
                            alert("Error");
                        }
                    });
                }

            },
            DeleteFolder: function () {
                var name = $('#DirectoryList option:selected').val();
                var doIt = confirm('do you want delete this folder?');
                if (doIt) {
                    $.ajax({
                        url: '@Url.Action("DeleteFolder")',
                        data: { myName: name },
                        type: 'POST',
                        success: function (data) {
                            setTimeout('', 5000);
                            Solution.ImageUpload.BindDirectoryList();

                        },
                        error: function () {
                            alert("Error");
                        }
                    });

                }
            },
            BindImageList: function (name) {
                this.blockUI();
                $.ajax({
                    url: '@Url.Action("BindImageList")',
                    data: { myName: name },
                    type: 'POST',
                    success: function (data) {

                        $('#imgList').children().eq(0).children().remove();
                        $.each(data, function (key, value) {
                            $('#imgList').children().append('<li><div ><img  src="' + value + '"  /></div></li>');
                        });
                        $('#imgList > ul > li > div > img').eq(0).attr("selected", "selected").attr('class', 'selectImg');
                        Solution.ImageUpload.BinImageToOne();
                        $.unblockUI();
                    },
                    error: function () {
                        alert("Error");
                    }
                });


            },
            OnSelectImage: function () {
                $('#imgList img').live('click', function () {
                    var thisObj = this;
                    $('#imgList img[selected="selected"]').removeAttr('selected').removeAttr('class');
                    $(thisObj).attr('selected', 'selected').attr('class', 'selectImg');
                    Solution.ImageUpload.BinImageToOne();
                });

            },
            BinImageToOne: function () {
                var tmp = $('#imgList img[selected="selected"]').eq(0);
                var value = $(tmp).attr('src');
                if (typeof (value) != 'undefined') {
                    var index1 = value.lastIndexOf('/');
                    var tmpppp = value.substr(index1 + 1, value.length - (index1 + 1));
                    $('#NameSelect').val(tmpppp);
                    $('#imgView a').eq(0).attr('href', $(tmp).attr('src'));
                    $('#imgView img').eq(0).attr('src', $(tmp).attr('src'));

                    Solution.ImageUpload.GetImageSize();
                    //  window.top.opener.CKEDITOR.dialog.getCurrent().setValueOf('info', 'txtUrl', encodeURI('"' + $(tmp).attr('src') + '"'));
                    //  window.top.close();
                    //  window.top.opener.focus();

                }
            },
            DeleteImage: function () {
                thisObj = this;
                thisObj.blockUI;
                setTimeout('', 500);
                var name = $('#NameSelect').val();
                var doIt = confirm('do you want delete this item?');
                if (doIt) {
                    $.ajax({
                        url: '@Url.Action("DeleteItem")',
                        data: { myName: name },
                        type: 'POST',
                        success: function (data) {
                            if (data == 'ok') {
                                setTimeout('', 2000);
                                Solution.ImageUpload.DirectoryListSelectChange();
                            }
                            else
                                alert("err");
                            thisObj.UnblockUI();
                        },
                        error: function () {
                            alert("Error");
                        }
                    });

                }
            },
            RenameItem: function () {
                var name = $('#NameSelect').val();
                var nName = prompt('Enter new name', name);
                if (nName.length > 0) {
                    $.ajax({
                        url: '@Url.Action("RenameItem")',
                        data: { myName: name, newName: nName },
                        type: 'POST',
                        success: function (data) {
                            if (data == 'ok') {
                                setTimeout('', 2000);
                                Solution.ImageUpload.DirectoryListSelectChange();
                            }
                            else
                                alert("err");
                        },
                        error: function () {
                            alert("Error");
                        }
                    });
                }
            },
            GetImageSize: function () {
                var name = $('#NameSelect').val();
                $.ajax({
                    url: '@Url.Action("GetImageWidthHeight")',
                    data: { myName: name },
                    type: 'POST',
                    success: function (data) {
                        if (data != 'no') {
                            $('#ResizeWidth').val(data.imgWidth);
                            $('#ResizeHeight').val(data.imgHeight);
                        }
                        else
                            alert("err");
                    },
                    error: function () {
                        alert("Error");
                    }
                });

            },
            GetHeightByWidht: function () {
                var name = $('#NameSelect').val();
                var width = $('#ResizeWidth').val();
                if (!isNaN(width) && width > 0) {
                    $.ajax({
                        url: '@Url.Action("GetImageHeightByWidth")',
                        data: { myName: name, myWidth: width },
                        type: 'POST',
                        success: function (data) {
                            if (data != 'no') {
                                $('#ResizeHeight').val(data);
                            }
                            else
                                alert("err");
                        },
                        error: function () {
                            alert("Error");
                        }
                    });
                }
            },
            CloseUpload: function () {
                $('#upload').hide();
                var name = $('#DirectoryList option:selected').val();
                Solution.ImageUpload.BindImageList(name);
                Solution.ImageUpload.UnblockUI();
            },
            OpenUpload: function () {
                Solution.ImageUpload.blockUINoMess();
                $('#fileupload').fileupload('destroy');
                $('#fileupload').fileupload({
                });
                $('#upload').show();
            },
            BindEvent: function () {
                $('#uploadClose').click(Solution.ImageUpload.CloseUpload);
                $('#UploadButton').click(Solution.ImageUpload.OpenUpload);

            },
            Ok: function () {
                var tmp = $('#imgList img[selected="selected"]').eq(0);
                window.top.opener.CKEDITOR.dialog.getCurrent().setValueOf('info', 'txtUrl', encodeURI($(tmp).attr('src')));
                window.top.close();
                window.top.opener.focus();
            },
            ResizeImage: function () {
                var name = $('#NameSelect').val();
                var Width = $('#ResizeWidth').val();
                var Height = $('#ResizeHeight').val();
                var doIt = confirm('do you want resize this item?');
                if (doIt && (!isNaN(Height)) && (!isNaN(Width))) {
                    $.ajax({
                        url: '@Url.Action("ResizeThisImage")',
                        data: { myName: name, myWidth: Width, myHeight: Height },
                        type: 'POST',
                        success: function (data) {
                            if (data != 'no') {
                                $('#UploadMessage').text('Resize success').delay(1000).text('');

                            }
                            else
                                $('#UploadMessage').text('Resize error').delay(1000).text('');

                        },
                        error: function () {
                            alert("Error");
                        }
                    });
                }
            },
            OnChangeWidth: function () {
                Solution.ImageUpload.GetHeightByWidht();
            },
            blockUI: function () {
                $.blockUI({ message: '<h4> Just a moment...</h4>' });
            },
            blockUINoMess: function () {
                $.blockUI({ message: null });
            },
            UnblockUI: function () {
                $.unblockUI();
            }
        }

        $(document).ready(function () {
            Solution.ImageUpload.Init();
        }); //.ajaxStop($.unblockUI);
        //$(document).ready(function () {		
        //    Solution.ImageUpload.Init();
        //}).ajaxStart($.blockUI).ajaxStop($.unblockUI);
    </script>
</head>
<body>
    <div class="form">
        <h1>
            Image Browser</h1>
        <table class="tb" cellpadding="10" cellspacing="0">
            <tr>
                <td class="col1">
                    <div class="scroll" id="imgList">
                        <ul>
                        </ul>
                    </div>
                </td>
                <td class="col2">
                    <div>
                        Folders:</div>
                    <div>
                        <select name="DirectoryList" id="DirectoryList" onchange="Solution.ImageUpload.DirectoryListSelectChange();"/>
                        </select>
                        <input type="button" name="DeleteDirectoryButton" value="Delete" id="DeleteDirectoryButton"
                            onclick="Solution.ImageUpload.DeleteFolder();" />
                        <input type="button" name="NewDirectoryButton" value="New" onclick="Solution.ImageUpload.CreateNewFolder();"
                            id="NewDirectoryButton" />
                    </div>
                    <div>
                        <div id="imgView">
                            <a href="#" target="_blank">
                                <img src="#" alt="" /></a>
                        </div>
                    </div>
                    <div>
                        <input id="NameSelect" type="text" readonly="readonly" />
                    </div>
                    <div>
                        <input type="button" name="RenameImageButton" value="Rename" onclick="Solution.ImageUpload.RenameItem();"
                            id="RenameImageButton" />
                        <input type="button" name="DeleteImageButton" value="Delete" onclick="Solution.ImageUpload.DeleteImage();"
                            id="DeleteImageButton" />
                    </div>
                    <div class="margin20">
                        Resize:</div>
                    <div>
                        <input name="ResizeWidth" type="text" id="ResizeWidth" style="width: 94px;" onkeyup="Solution.ImageUpload.OnChangeWidth();" />
                        x
                        <input name="ResizeHeight" type="text" id="ResizeHeight" style="width: 94px;" />
                        <input type="button" onclick="Solution.ImageUpload.ResizeImage();" name="ResizeImageButton"
                            value="Resize Image" id="ResizeImageButton" /><br />
                        <span id="ResizeMessage" class="note"></span>
                    </div>
                </td>
            </tr>
        </table>
        <div class="nav">
            <div>
                <div class="btnUpload">
                    <input type="button" name="UploadButton" value="Upload Image" id="UploadButton" /><br />
                    <span id="UploadMessage" class="note"></span>
                </div>
                <div class="btnMain">
                    <input type="button" name="OkButton" value="Ok" onclick="Solution.ImageUpload.Ok();"
                        id="OkButton" />
                    <input type="button" name="CancelButton" value="Cancel" onclick="window.top.close(); window.top.opener.focus();"
                        id="CancelButton" />
                </div>
            </div>
        </div>
        <div id="upload">
            <div id="uploadNav">
                >>Upload Image(s)
                <div id="uploadClose">
                    x</div>
            </div>
            <div>
                <div id="fileupload">
                    <form action="@Url.Action("UploadImage")" method="POST" enctype="multipart/form-data">
                    <div class="fileupload-buttonbar">
                        <label class="fileinput-button">
                            <span>Add files...</span>
                            <input id="file" type="file" name="files[]" multiple>
                        </label>
                        <button type="submit" class="start">
                            Start upload</button>
                        <button type="reset" class="cancel">
                            Cancel upload</button>
                        <button type="button" class="delete">
                            Delete files</button>
                    </div>
                    </form>
                    <div class="fileupload-content">
                        <table class="files">
                        </table>
                        <div class="fileupload-progressbar">
                        </div>
                    </div>
                </div>
                <script id="template-upload" type="text/x-jquery-tmpl">
                        <tr class="template-upload{{if error}} ui-state-error{{/if}}">
                            <td class="preview"></td>
                            <td class="name">${name}</td>
                            <td class="size">${sizef}</td>
                            {{if error}}
                                <td class="error" colspan="2">Error:
                                    {{if error === 'maxFileSize'}}File is too big
                                    {{else error === 'minFileSize'}}File is too small
                                    {{else error === 'acceptFileTypes'}}Filetype not allowed
                                    {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
                                    {{else}}${error}
                                    {{/if}}
                                </td>
                            {{else}}
                                <td class="progress"><div></div></td>
                                <td class="start"><button>Start</button></td>
                            {{/if}}
                            <td class="cancel"><button>Cancel</button></td>
                        </tr>
                </script>
                <script id="template-download" type="text/x-jquery-tmpl">
                        <tr class="template-download{{if error}} ui-state-error{{/if}}">
                            {{if error}}
                                <td></td>
                                <td class="name">${namefdsa}</td>
                                <td class="size">${sizef}</td>
                                <td class="error" colspan="2">Error:
                                    {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
                                    {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
                                    {{else error === 3}}File was only partially uploaded
                                    {{else error === 4}}No File was uploaded
                                    {{else error === 5}}Missing a temporary folder
                                    {{else error === 6}}Failed to write file to disk
                                    {{else error === 7}}File upload stopped by extension
                                    {{else error === 'maxFileSize'}}File is too big
                                    {{else error === 'minFileSize'}}File is too small
                                    {{else error === 'acceptFileTypes'}}Filetype not allowed
                                    {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
                                    {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
                                    {{else error === 'emptyResult'}}Empty file upload result
                                    {{else}}${error}
                                    {{/if}}
                                </td>
                            {{else}}
                                <td class="preview">
                                    {{if Thumbnail_url}}
                                        <a href="${url}" target="_blank"><img src="${Thumbnail_url}"></a>
                                    {{/if}}
                                </td>
                                <td class="name">
                                    <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${Name}</a>
                                </td>
                                <td class="size">${Length}</td>
                                <td colspan="2"></td>
                            {{/if}}
                            <td class="delete">
                                <button data-type="${delete_type}" data-url="${delete_url}">Delete</button>
                            </td>
                        </tr>
                </script>
            </div>
        </div>
</body>
</html>
